import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Store from '../store'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home/index',
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView,
    children: [{
      path: 'index',
      name: '/home/index',
      component: () => import('../views/Index.vue'),
      meta: {
        breadcrumbs: ['首页']
      }
    },
    {
      path: 'mall-order-list',
      name: '/home/mall-order-list',
      component: () => import('../views/mall/MallOrderList.vue'),
      // meta称为路由对象的元数据，在此处可以自定义配置一些路由相关参数
      // 方便在组件中使用
      meta: {
        // 在此自定义一个meta数据，保存当前路由应显示的面包屑导航列表
        breadcrumbs: ['花卉商城', '订单列表']
      }
    },
    {
      path: 'mall-order-update/:oid',
      name: '/home/mall-order-update',
      component: () => import('../views/mall/MallOrderUpdate.vue'),
      // meta称为路由对象的元数据，在此处可以自定义配置一些路由相关参数
      // 方便在组件中使用
      meta: {
        // 在此自定义一个meta数据，保存当前路由应显示的面包屑导航列表
        breadcrumbs: ['花卉商城', '订单列表','修改订单']
      }
    },
    {
      path: 'flower-list',
      name: '/home/flower-list',
      component: () => import('../views/mall/FlowerList.vue'),
      // meta称为路由对象的元数据，在此处可以自定义配置一些路由相关参数
      // 方便在组件中使用
      meta: {
        // 在此自定义一个meta数据，保存当前路由应显示的面包屑导航列表
        breadcrumbs: ['花卉商城', '花卉列表']
      }
    }
    , {
      path: 'flower-add',
      name: '/home/flower-add',
      component: () => import('../views/mall/FlowerAdd.vue'),
      meta: {
        breadcrumbs: ['花卉商城', '添加花卉']
      }
    }, {
      // 该路由末尾接收电影id参数，
      // 匹配：/home/flower-update/135
      path: 'flower-update/:gid',
      name: '/home/flower-update',
      component: () => import('../views/mall/FlowerUpdate.vue'),
      meta: {
        breadcrumbs: ['花卉商城', '花卉列表', '修改花卉']
      }
    }
      , {
      path: 'square-list',
      name: '/home/square-list',
      component: () => import('../views/square/SquareList.vue'),
      meta: {
        breadcrumbs: ['花卉广场', '分享列表']
      }
    }, {
      path: 'square-add',
      name: '/home/square-add',
      component: () => import('../views/square/SquareAdd.vue'),
      meta: {
        breadcrumbs: ['花卉广场', '添加分享']
      }
    },{
      path: 'square-main',
      name: '/home/square-main',
      component: () => import('../views/square/shareMain.vue'),
      meta: {
        breadcrumbs: ['花卉广场', '分享详情']
      }
    },{
      path: 'square-user',
      name: '/home/square-user',
      component: () => import('../views/square/userShare.vue'),
      meta: {
        breadcrumbs: ['花卉广场', '用户分享']
      }
    },  {
      path: 'encyclopedias-list',
      name: '/home/encyclopedias-list',
      component: () => import('../views/encyclopedias/EncyclopediasList.vue'),
      meta: {
        breadcrumbs: ['花卉百科', '百科列表']
      }
    }, {
      path: 'encyclopedias-add',
      name: '/home/encyclopedias-add',
      component: () => import('../views/encyclopedias/EncyclopediasAdd.vue'),
      meta: {
        breadcrumbs: ['花卉百科', '添加花卉']
      }
    },{
      path: 'encyclopedias-update/:id',
      name: '/home/encyclopedias-update',
      component: () => import('../views/encyclopedias/EncyclopediasUpdate.vue'),
      meta: {
        breadcrumbs: ['花卉百科', '修改花卉']
      }
    },{
      path: 'encyclopedias-detail/:id',
      name: '/home/encyclopedias-detail',
      component: () => import('../views/encyclopedias/EncyclopediasDetail.vue'),
      meta: {
        breadcrumbs: ['花卉百科', '花卉详情']
      }
    },

  {
    path: 'userlist',
    name: '/home/userlist',
    component: () => import('../views/user/UserList.vue'),
    meta: {
      breadcrumbs: ['用户管理', '用户列表']
    }
  }
  
  ]
  },{
    path: '/login',
    name: '/login',
    component: () => import('../views/Login.vue'),
  }
]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

// 注册全局的前置路由守卫，监控路由的跳转过程：当从A跳转到B之前执行
router.beforeEach((to, from, next)=>{
  // console.log(from) // 起点路由对象
  // console.log(to)   // 目标路由对象
  // 判断当前是否跳转到登录页
  if(to.path == '/login'){     // 不拦截去往登录页面
    next()  
  }else {
    // 判断用户是否已经登录，只有登录过的用户，才可以跳转到其他页面
    if(Store.state.user){
      next()
    }else{ // 否则，未登录直接跳转到登录页面
      next('/login')
    }
  }

//   // next('/') // 或者 next({ path: '/' }): 跳转到一个不同的地址。
//   // next()   // 方法，调用此方法，才可以执行正常的后续流程
})

export default router
